<template>
  <div class="user-container">
    <el-table :data="list" stripe>
      <el-table-column prop="type" label="ID" width="100">
        <template slot-scope="scope">
          <el-tag size="medium">
            {{ scope.row.id }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="用户名"
        prop="username"
        width="200"
      ></el-table-column>
      <el-table-column label="用户类型" width="200">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.permisson"
            placement="top-start"
          >
            <el-tag size="medium">
              {{
                scope.row.permisson == "root" ||
                scope.row.permisson == "blocked"
                  ? "博主"
                  : "普通用户"
              }}
            </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="250"></el-table-column>
      <el-table-column prop="pageView" label="操作" width="300">
        <template slot-scope="scope">
          <el-popconfirm
            title="这是确定删除吗？"
            @onConfirm="handleDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-popconfirm>
          <el-popconfirm
            title="这是确定删除吗？"
            @onConfirm="handleBlock(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="info">
              加入黑名单
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            v-if="scope.row.permisson == 'block'"
            title="这是确定加入吗？"
            @onConfirm="handleUnBlock(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="info">
              移除黑名单
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            v-if="scope.row.permisson == 'root'"
            title="这是确定收回吗？"
            @onConfirm="handleremoveRoot(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="warning">
              收回权限
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
  import {
    getuserAll,
    deluser,
    getcreatedblock,
    getcreatedremoveRoot,
  } from "@/api/article";
  export default {
    name: "User",
    components: {},
    data() {
      return {
        list: [],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        imageList: [],
        background: true,
        layout: "total, prev, pager, next, jumper",
      };
    },
    created() {
      this.getData();
    },
    mounted() {},
    methods: {
      getData() {
        getuserAll(this.queryForm).then((res) => {
          this.list = [];
          res.data.forEach((item, index) => {
            this.list.push(item);
          });
          this.total = res.num;
          console.log(res);
        });
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val;
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          this.getData();
          loading.close();
        });
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val;
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          this.getData();
          loading.close();
        });
      },
      handleDelete(id) {
        deluser({ id }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getData();
          }
        });
      },
      handleBlock(id) {
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          getcreatedblock({ id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "加入成功",
                type: "success",
              });
            }
            this.getData();
            loading.close();
          });
        });
      },
      handleUnBlock(id) {
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          getcreatedUnblock({ id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "移除成功",
                type: "success",
              });
            }
            this.getData();
            loading.close();
          });
        });
      },
      handleremoveRoot(id) {
        this.$baseColorfullLoading(1, "正在加载", (loading) => {
          getcreatedremoveRoot({ id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "收回成功",
                type: "success",
              });
            }
            this.getData();
            loading.close();
          });
        });
      },
    },
  };
</script>

<style scoped>
  .el-button {
    margin-left: 10px;
  }
</style>
